@mixin btn-style($bg-color, $bg-color-hover, $bg-color-active) {
  color: #fff;
  border-color: $bg-color;
  background-color: $bg-color;

  &:hover, &.focus, &:focus {
    color: #fff;
    border-color: $bg-color-hover;
    background-color: $bg-color-hover;
  }

  &:focus, &.focus {
    &, &:active, &.active {
      outline: none;
    }
  }

  &.active, &:active {
    box-shadow: none;

    &, &:hover, &:focus {
      border-color: $bg-color-active;
      background-color: $bg-color-active;
    }
  }

  &.btn--outline {
    color: $bg-color;
    background-color: #fff;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $line-height) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
}
